<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 顶栏导航 begin -->
    <div class="layui-header">
        <div class="layui-logo">
            <img src="../images/logo.png" class="x-logo">
            <img src="../images/title.png" class="x-top-title">
        </div>
        <div class="layui-layout-right">
            <ul class="layui-nav x-top-nav">
                <li class="layui-nav-item active">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            首页
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-qbyp.png">
                            情报研判系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-xxcj.png">
                            信息采集系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-xsaj.png">
                            刑事案件系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-ywgl.png">
                            运维管理系统
                        </div>
                    </a></li>
            </ul>
            <ul class="x-nav-user">
                <li class="layui-nav-item">
                    <dl class="x-user-info">
                        <dd class="x-user-photo">
                            <img src="../images/user.png">
                        </dd>
                        <dd class="x-user-text-box">
                            <span class="x-user-name">系统管理员：王要得</span>
                            <span class="x-user-score">积分：279</span>
                        </dd>
                        <dd class="x-user-logout">
                            <img class="nav-logout-icon" src="../images/nav/nav-logout.png">
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 顶栏导航 end -->

    <!-- 主体内容 begin -->
    <div class="layui-body layui-body-full">
        <!-- 内容主体区域 -->
        <div class="layui-row layui-col-space15 x-layou-row-p20">
            <div class="layui-col-md7">
                <div class="layui-card">
                    <div class="layui-card-header">全军案发地点态势图</div>
                    <div class="layui-card-body">
                        <div class="x-china-rank">
                            <span class="x-top-tip">TOP</span>
                            <span class="x-top-buttom" id="switch">
                                案件高发排行
                                <i class="x-bottom-icon x-bi-t">▲</i>
                                <i class="x-bottom-icon x-bi-b">▼</i>
                            </span>
                            <div class="x-top-list">
                                <dl>
                                    <dt>1</dt>
                                    <dd>北京市</dd>
                                    <dd>120</dd>
                                </dl>
                                <dl>
                                    <dt>2</dt>
                                    <dd>广州市</dd>
                                    <dd>100</dd>
                                </dl>
                                <dl>
                                    <dt>3</dt>
                                    <dd>青岛市</dd>
                                    <dd>98</dd>
                                </dl>
                                <dl>
                                    <dt>4</dt>
                                    <dd>沈阳市</dd>
                                    <dd>87</dd>
                                </dl>
                                <dl>
                                    <dt>5</dt>
                                    <dd>成都市</dd>
                                    <dd>77</dd>
                                </dl>
                                <dl>
                                    <dt>6</dt>
                                    <dd>天津市</dd>
                                    <dd>71</dd>
                                </dl>
                                <dl>
                                    <dt>7</dt>
                                    <dd>西安市</dd>
                                    <dd>54</dd>
                                </dl>
                                <dl>
                                    <dt>8</dt>
                                    <dd>南京市</dd>
                                    <dd>36</dd>
                                </dl>
                                <dl>
                                    <dt>9</dt>
                                    <dd>石家庄市</dd>
                                    <dd>23</dd>
                                </dl>
                                <dl>
                                    <dt>10</dt>
                                    <dd>湛江市</dd>
                                    <dd>10</dd>
                                </dl>
                            </div>
                        </div>
                        <div id="mapBox" class="x-china-box">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md5">
                <!--案件统计和自杀统计-->
                <div class="layui-card layui-tab layui-tab-brief" lay-filter="chartTab">
                    <ul class="layui-card-header layui-tab-title">
                        <li class="layui-this" lay-id="case">案件统计</li>
                        <li lay-id="suicide">自杀统计</li>
                    </ul>
                    <div class="layui-card-body layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="x-pie-box" id="main"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="x-pie-box" id="main2"></div>
                        </div>
                    </div>
                </div>
                <!--信息采集统计-->
                <div class="layui-card">
                    <div class="layui-card-header">
                        信息采集统计
                    </div>
                    <div class="layui-card-body">
                        <div class="x-bar-box" id="bar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体内容 end -->

    <!-- 底栏 begin -->
    <div class="layui-footer layui-footer-full">
        <!-- 底部固定区域 -->
        主程序版本号: V1.0.0.1
    </div>
    <!-- 底栏 end -->
</div>


<script src="../../lib/layui/layui.all.js"></script>
<script src="../../lib/jquery-1.9.1.min.js"></script>
<script src="../../lib/echarts/echarts.js"></script>
<script src="../js/china.js"></script>
<script>
    (function () {
        // 模拟数据
        // 态势散点图
        var cityData = [
            {name: "海门", value: 9},
            {name: "鄂尔多斯", value: 12},
            {name: "招远", value: 12},
            {name: "胶南", value: 22},
            {name: "南通", value: 23},
            {name: "拉萨", value: 24},
            {name: "云浮", value: 24},
            {name: "梅州", value: 25},
            {name: "文登", value: 25},
            {name: "上海", value: 25},
            {name: "攀枝花", value: 25},
            {name: "湖州", value: 32},
            {name: "汕头", value: 32},
            {name: "昆山", value: 33},
            {name: "宁波", value: 33},
            {name: "湛江", value: 33},
            {name: "揭阳", value: 34},
            {name: "荣成", value: 34},
            {name: "连云港", value: 35},
            {name: "葫芦岛", value: 35},
            {name: "常熟", value: 36},
            {name: "东莞", value: 36},
            {name: "河源", value: 36},
            {name: "淮安", value: 36},
            {name: "泰州", value: 36},
            {name: "南宁", value: 37},
            {name: "营口", value: 37},
            {name: "惠州", value: 37},
            {name: "江阴", value: 37},
            {name: "蓬莱", value: 37},
            {name: "韶关", value: 38},
            {name: "嘉峪关", value: 38},
            {name: "广州", value: 38},
            {name: "延安", value: 38},
            {name: "太原", value: 39},
            {name: "清远", value: 39},
            {name: "中山", value: 39},
            {name: "昆明", value: 39},
            {name: "寿光", value: 40},
            {name: "盘锦", value: 40},
            {name: "长治", value: 41},
            {name: "深圳", value: 41},
            {name: "珠海", value: 42},
            {name: "宿迁", value: 43},
            {name: "咸阳", value: 43},
            {name: "铜川", value: 44},
            {name: "平度", value: 44},
            {name: "佛山", value: 44},
            {name: "海口", value: 44},
            {name: "江门", value: 45},
            {name: "章丘", value: 45},
            {name: "肇庆", value: 46},
            {name: "大连", value: 47},
            {name: "临汾", value: 47},
            {name: "吴江", value: 47},
            {name: "石嘴山", value: 49},
            {name: "沈阳", value: 50},
            {name: "苏州", value: 50},
            {name: "茂名", value: 50},
            {name: "嘉兴", value: 51},
            {name: "长春", value: 51},
            {name: "胶州", value: 52},
            {name: "银川", value: 52},
            {name: "张家港", value: 52},
            {name: "三门峡", value: 53},
            {name: "锦州", value: 54},
            {name: "南昌", value: 54},
            {name: "柳州", value: 54},
            {name: "三亚", value: 54},
            {name: "自贡", value: 56},
            {name: "吉林", value: 56},
            {name: "阳江", value: 57},
            {name: "泸州", value: 57},
            {name: "西宁", value: 57},
            {name: "宜宾", value: 58},
            {name: "呼和浩特", value: 58},
            {name: "成都", value: 58},
            {name: "大同", value: 58},
            {name: "镇江", value: 59},
            {name: "桂林", value: 59},
            {name: "张家界", value: 59},
            {name: "宜兴", value: 59},
            {name: "北海", value: 60},
            {name: "西安", value: 61},
            {name: "金坛", value: 62},
            {name: "东营", value: 62},
            {name: "牡丹江", value: 63},
            {name: "遵义", value: 63},
            {name: "绍兴", value: 63},
            {name: "扬州", value: 64},
            {name: "常州", value: 64},
            {name: "潍坊", value: 65},
            {name: "重庆", value: 66},
            {name: "台州", value: 67},
            {name: "南京", value: 67},
            {name: "滨州", value: 70},
            {name: "贵阳", value: 71},
            {name: "无锡", value: 71},
            {name: "本溪", value: 71},
            {name: "克拉玛依", value: 72},
            {name: "渭南", value: 72},
            {name: "马鞍山", value: 72},
            {name: "宝鸡", value: 72},
            {name: "焦作", value: 75},
            {name: "句容", value: 75},
            {name: "北京", value: 79},
            {name: "徐州", value: 79},
            {name: "衡水", value: 80},
            {name: "包头", value: 80},
            {name: "绵阳", value: 80},
            {name: "乌鲁木齐", value: 84},
            {name: "枣庄", value: 84},
            {name: "杭州", value: 84},
            {name: "淄博", value: 85},
            {name: "鞍山", value: 86},
            {name: "溧阳", value: 86},
            {name: "库尔勒", value: 86},
            {name: "安阳", value: 90},
            {name: "开封", value: 90},
            {name: "济南", value: 92},
            {name: "德阳", value: 93},
            {name: "温州", value: 95},
            {name: "九江", value: 96},
            {name: "邯郸", value: 98},
            {name: "临安", value: 99},
            {name: "兰州", value: 99},
            {name: "沧州", value: 100},
            {name: "临沂", value: 103},
            {name: "南充", value: 104},
            {name: "天津", value: 105},
            {name: "富阳", value: 106},
            {name: "泰安", value: 112},
            {name: "诸暨", value: 112},
            {name: "郑州", value: 113},
            {name: "哈尔滨", value: 114},
            {name: "聊城", value: 116},
            {name: "芜湖", value: 117},
            {name: "唐山", value: 119},
            {name: "平顶山", value: 119},
            {name: "邢台", value: 119},
            {name: "德州", value: 120},
            {name: "济宁", value: 120},
            {name: "荆州", value: 127},
            {name: "宜昌", value: 130},
            {name: "义乌", value: 132},
            {name: "丽水", value: 133},
            {name: "洛阳", value: 134},
            {name: "秦皇岛", value: 136},
            {name: "株洲", value: 143},
            {name: "石家庄", value: 147},
            {name: "莱芜", value: 148},
            {name: "常德", value: 152},
            {name: "保定", value: 153},
            {name: "湘潭", value: 154},
            {name: "金华", value: 157},
            {name: "岳阳", value: 169},
            {name: "长沙", value: 175},
            {name: "衢州", value: 177},
            {name: "廊坊", value: 193},
            {name: "菏泽", value: 194},
            {name: "合肥", value: 229},
            {name: "武汉", value: 273},
            {name: "大庆", value: 279}
        ]
        // 态势地图色块数据
        var mapData = [
            {
                name: '河北省',
                value: 100
            },
            {
                name: '广东省',
                value: 201
            },
            {
                name: '北京市',
                value: 150
            }
        ]
        // 案件统计数据
        var casePieData = [
            {value: 150, name: '情报', itemStyle: {color: '#E5CF0D'}},
            {value: 250, name: '出入境', itemStyle: {color: '#2EC7C9'}},
            {value: 100, name: '治安', itemStyle: {color: '#97B552'}},
            {value: 200, name: '治安', itemStyle: {color: '#C7E697'}},
            {value: 200, name: '网安', itemStyle: {color: '#0099CC'}},
            {value: 1000, name: '网安', itemStyle: {color: '#5AB1EF'}},
            {value: 1000, name: '法制', itemStyle: {color: '#FFB980'}},
            {value: 400, name: '技侦', itemStyle: {color: '#D87A80'}},
            {value: 400, name: '刑侦', itemStyle: {color: '#B6A2DE'}}
        ]
        // 自杀统计数据
        var suicidePieData = [
            {value: 150, name: '情报', itemStyle: {color: '#E5CF0D'}},
            {value: 250, name: '出入境', itemStyle: {color: '#2EC7C9'}},
            {value: 100, name: '治安', itemStyle: {color: '#97B552'}},
            {value: 200, name: '治安', itemStyle: {color: '#C7E697'}},
            {value: 200, name: '网安', itemStyle: {color: '#0099CC'}},
            {value: 1000, name: '网安', itemStyle: {color: '#5AB1EF'}},
            {value: 1000, name: '法制', itemStyle: {color: '#FFB980'}},
            {value: 400, name: '技侦', itemStyle: {color: '#D87A80'}},
            {value: 400, name: '刑侦', itemStyle: {color: '#B6A2DE'}}
        ]
        // 信息采集排行
        var infoBarData = [
            {
                name: '类别',
                value: 100
            },
            {
                name: '类别',
                value: 152
            },
            {
                name: '类别',
                value: 200
            },
            {
                name: '类别',
                value: 334
            },
            {
                name: '类别',
                value: 550
            },
            {
                name: '类别',
                value: 330
            },
            {
                name: '类别',
                value: 220
            },
            {
                name: '类别',
                value: 100
            },
            {
                name: '类别',
                value: 100
            },
            {
                name: '类别',
                value: 100
            }
        ]


        // 实例对象缓存
        var echartsCache = {
            caseChart: null,
            suicideChart: null,
            infoChart: null
        }
        var fun = {
            /**
             * 全军案发地点态势图
             */
            mapChart: function () {
                drawMap.reloadMap()
                drawMap.init({
                    $: layui.$,
                    el: document.getElementById('mapBox'),
                    cityData: cityData,
                    mapData: mapData
                })
            },

            /**
             * 案件统计图表
             */
            caseChart: function () {
                // 案件统计
                if (echartsCache.caseChart) {
                    echartsCache.caseChart.dispose()
                }
                echartsCache.caseChart = echarts.init(document.getElementById('main'))
                var legendData = []  // 图例数据
                var caseCount = 0 // 总数和
                for (var i = 0; i < casePieData.length; i++) {
                    legendData.push(casePieData[i].name)
                    caseCount += (casePieData[i].value || 0)
                }

                echartsCache.caseChart.setOption({
                    title: {
                        text: '全军刑事案件统计图（自2002年来）',
                        left: 'center',
                        textStyle: {
                            color: "#348EE1"
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        bottom: 10,
                        itemWidth: 16,
                        itemHeight: 16,
                        data: legendData
                    },
                    grid: {
                        show: false,
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    series: [
                        {
                            name: '总数',
                            type: 'pie',
                            selectedMode: false,
                            legendHoverLink: false,
                            hoverAnimation: false,
                            center: ['50%', '60%'],
                            radius: [0, '42%'],
                            silent: true,
                            label: {
                                show: true,
                                position: 'center',
                                fontFamily: 'Microsoft YaHei',
                                color: '#8A8A8A',
                                fontSize: 18,
                                formatter: `{b}:{ct|{c}}条`,
                                rich: {
                                    ct: {
                                        color: '#8A8A8A',
                                        fontSize: 20
                                    }
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: caseCount, name: '总数', itemStyle: {color: '#E3F6FF'}},
                            ]
                        },
                        {
                            type: 'pie',
                            center: ['50%', '60%'],
                            radius: ['50%', '75%'],
                            label: {
                                show: true,
                                formatter: '\n{hr|}\n{b}({c})',
                                rich: {
                                    hr: {
                                        width: '100%',
                                        height: 1,
                                        backgroundColor: 'auto',
                                        shadowBlur: 2,
                                        shadowOffsetX: 2,
                                        padding: [0, 10]
                                    }
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 10,
                                length2: 20
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0,0,0,0.45)',
                                textStyle: {
                                    color: '#ffffff',
                                    fontFamily: 'Microsoft YaHei'
                                },
                                formatter: function (p) {
                                    var str = p.data.name
                                    if (p.data.value) {
                                        str = p.data.name + '（' + p.data.value + '）'
                                    }
                                    return str
                                }
                            },
                            data: casePieData
                        }
                    ]

                });
            },

            /**
             * 自杀统计图表
             */
            suicideChart: function () {
                // 自杀统计
                if (echartsCache.suicideChart) {
                    echartsCache.suicideChart.dispose()
                }
                echartsCache.suicideChart = echarts.init(document.getElementById('main2'))
                var legendData = []  // 图例数据
                var suicideCount = 0 // 总数和
                for (var i = 0; i < suicidePieData.length; i++) {
                    legendData.push(suicidePieData[i].name)
                    suicideCount += (suicidePieData[i].value || 0)
                }

                echartsCache.suicideChart.setOption({
                    title: {
                        text: '全军自杀统计图（自2002年来）',
                        left: 'center',
                        textStyle: {
                            color: "#348EE1"
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        bottom: 10,
                        itemWidth: 16,
                        itemHeight: 16,
                        data: legendData
                    },
                    grid: {
                        show: false,
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    series: [
                        {
                            name: '总数',
                            type: 'pie',
                            selectedMode: false,
                            legendHoverLink: false,
                            hoverAnimation: false,
                            center: ['50%', '60%'],
                            radius: [0, '42%'],
                            silent: true,
                            label: {
                                show: true,
                                position: 'center',
                                fontFamily: 'Microsoft YaHei',
                                color: '#8A8A8A',
                                fontSize: 18,
                                formatter: `{b}:{ct|{c}}条`,
                                rich: {
                                    ct: {
                                        color: '#8A8A8A',
                                        fontSize: 20
                                    }
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: suicideCount, name: '总数', itemStyle: {color: '#E3F6FF'}},
                            ]
                        },
                        {
                            type: 'pie',
                            center: ['50%', '60%'],
                            radius: ['50%', '75%'],
                            label: {
                                show: true,
                                formatter: '\n{hr|}\n{b}({c})',
                                rich: {
                                    hr: {
                                        width: '100%',
                                        height: 1,
                                        backgroundColor: 'auto',
                                        shadowBlur: 2,
                                        shadowOffsetX: 2,
                                        padding: [0, 10]
                                    }
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 10,
                                length2: 20
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0,0,0,0.45)',
                                textStyle: {
                                    color: '#ffffff',
                                    fontFamily: 'Microsoft YaHei'
                                },
                                formatter: function (p) {
                                    var str = p.data.name
                                    if (p.data.value) {
                                        str = p.data.name + '（' + p.data.value + '）'
                                    }
                                    return str
                                }
                            },
                            data: suicidePieData
                        }
                    ]

                });
            },

            /**
             * 信息采集统计图
             */
            infoChart: function () {
                if (echartsCache.infoChart) {
                    echartsCache.infoChart.dispose()
                }
                echartsCache.infoChart = echarts.init(document.getElementById('bar'))
                var infoXAxisData = []
                for (var i = 0; i < infoBarData.length; i++) {
                    infoXAxisData.push(infoBarData[i].name)
                }
                echartsCache.infoChart.setOption({
                    title: {
                        text: '全军各大单位信息采集TOP10',
                        textStyle: {
                            fontSize: 16,
                            fontFamily: "微软雅黑",
                            "color": "#348EE1"
                        },
                        x: 'center'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        show: true,
                        formatter: function (params) {
                            var tar = params[0];
                            return tar.name + ' : ' + tar.value;
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: infoXAxisData,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            barWidth: '40%',
                            data: infoBarData,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: 'rgba(29, 241, 135, 0.4)'},
                                            {offset: 1, color: '#3398DB'}
                                        ]
                                    )
                                }
                            }
                        }
                    ]
                });
            }
        }

        /* 初始化相关数据 */
        function init() {
            var element = layui.element;
            var hasShowSuicide = false; // 是否显示了 suicideChart
            // 监听统计切换
            element.on('tab(chartTab)', function (data, b) {
                if (!hasShowSuicide && data.index === 1) {
                    // 初始化自杀统计
                    fun.suicideChart()
                    hasShowSuicide = true
                }
            })
            // 切换显示态势排行列表
            var currentShow = false
            $('#switch').on('click', function () {
                if (!currentShow) {
                    $('.x-bi-t').hide();
                    $('.x-bi-b').show();
                    $('.x-top-list').show();
                } else {
                    $('.x-bi-t').show();
                    $('.x-bi-b').hide();
                    $('.x-top-list').hide();
                }
                currentShow = !currentShow
            })
            // 初始化图表
            fun.mapChart()
            fun.caseChart()
            fun.infoChart()
        }

        init()
        window.addEventListener('resize', function () {
            init()
        })

    })();
</script>
</body>
</html>